import React,{Component} from 'react';
import cookie from 'js-cookie'
import PubSub from 'pubsub-js'
import { Modal, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';


import MyBtn from '../mybutton/mybutton'
import './myheader.less'
import {getWeather,getAdress} from '../../api/index'
import {connect} from 'react-redux'

class Myheader extends Component{
    state = {
        curr_time :'2020-01-01 12:43:21',
        weather:'---',
        title:'首页'

    }
    //获取时间
    getT = ()=>{
        let week = [
            '一','二','三','四','五','六','日'
        ]
        //这里没有使用箭头函数，所以里面this就无法使用，需要保存this
        let that = this
        setInterval(function () {
            var date = new Date();
            var year = date.getFullYear(); //获取当前年份
            var mon = date.getMonth() + 1; //获取当前月份
            var da = date.getDate(); //获取当前日
            var day = date.getDay(); //获取当前星期几
            var h = date.getHours(); //获取小时
            let daystr = '一'
            if(day==0){
                daystr = week[6]
            }else{
                daystr = week[day-1]
            }
            if(h<10){
                h="0"+h
            }
            var m = date.getMinutes(); //获取分钟
            if(m <10){
                m ="0"+m
            }
            var s = date.getSeconds(); //获取秒
            if(s <10){
                s ="0"+s
            }
            
           that.setState({curr_time:`${year} 年 ${mon} 月 ${da} 日 \xa0\xa0\xa0\xa0\xa0\xa0\xa0 星期${daystr}\xa0\xa0\xa0    ${h}:${ m}:${s}`})
        }, 1000)

    }
    //获取天气
    getw = async ()=>{
        //测试跨域请求案例:这个是jsonp请求，百度开放的API
       /*  let url = 'http://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output=json&ak=uyv7xt0s5HQR3BMp56Za0WM2RzGZce3R'
        let adress = await getAdress(url)
        console.log("jsonp请求终于成功了！！！",adress)  */
        
       

        //后端设置jsonp请求去接受数据，这里是模拟数据
        let data = await getWeather()
        let weather = (data.data.result.now.text)
        // const weather = data.data.result.now
        this.setState({weather})
        
    }
    
    exit = ()=> {
        Modal.confirm({
          title: '确认要退出吗？',
          icon: <ExclamationCircleOutlined />,
          okText: '确认',
          cancelText: '取消',
          onOk : ()=>{
            //清除当前浏览器中的cookie
            cookie.remove('userid')
            //跳转到登录界面：直接用a标签做的
            console.log("cook清除成功")
            this.props.history.replace('/login')
            message.success('退出成功')
        } 
        });
      }

    componentDidMount(){
        PubSub.subscribe('titleChange',(msg,data)=>{
            this.setState({title:data})
            // console.log("标题改变，收到消息",data)
        })
        //获取时间和日期
        this.getw()
        this.getT()
    }

    render() {
        return(
            <div className = "header">
                <div className="header-top">
                    <span className="user" >您好！{this.props.user.username}</span>
                    <MyBtn onClick = {this.exit}>退出</MyBtn>  
                </div>
                <div className="header-bottom">
                    <span className="header-bottom-title">{this.state.title}</span>
                    <span className="time">{this.state.curr_time}</span>
                    <span className="location">秦皇岛</span>
                    <span className="tianqi">{this.state.weather}</span>
                </div>
            </div>
        )
    }
}
export default connect(
    state=>({user:state.user})
)(Myheader)